<template>
	<view>
		<view class="search">
			<u-search placeholder="搜索" v-model="content" @search="changeWord(content);search()"></u-search>
		</view>

		<view class="searchList" v-if="show==2">
			<view class="cartitem" v-for="(item,index) in searchList">
				<view class="pic">
					<image :src="item.imageValue" mode="aspectFill">
				</view>
				<view class="des">
					<view class="desitem1">{{item.name}}</view>
					<view class="desitem2">
						<text>${{item.price}}</text>
					</view>
				</view>

				<view class="shoppingCarts">
					<u-icon name="shopping-cart" color="tomato" size="30"
						@click="addNumber(user_id,item._id,1)"></u-icon>
				</view>
			</view>
		</view>




		<view class="beforeSearch" v-if="show==1">
			<view>历史搜索</view>
			<view class="historySearchBox">
				<view class="historySearchList" v-for="item in searchHistory" :key="index">
					<text @click="changeWord(item.content);search()">{{item.content}}</text>
					</view>
			</view>
			<view>热门搜索</view>
			<view class="hotSearchBox">
				<view class="hotSearchList" v-for="(item,index) in searchHot" :key="index">
					<!-- <text style="color: red;">{{index+1}}</text> -->
					<text @click="changeWord(item.content);search()" style="color: tomato;font-size: 40rpx;">{{item.content}}</text>
					</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {debounce} from "../../utils/performance.js"
	const db = uniCloud.database();
	const dbCmd = db.command;
	const CloudSearch = uniCloud.importObject("search");
	const cloudShoppingCarts = uniCloud.importObject("shoppingCarts")
	export default {
		data() {
			return {
				user_id: "",
				content: "",
				searchWord:"",
				searchList: [],
				searchHot: [],
				searchHistory: [],
				show: 1
			};
		},
		onLoad() {
			this.user_id = uni.getStorageSync("uni-id-pages-userInfo")._id;
			this.getsearchHistory();
			this.getsearchHot()
		},
		methods: {
			changeWord(content){
				this.searchWord=content;
			},
			async getsearchHot() {
				let res = await db.collection("search").groupBy('content').groupField('sum(searchCount) as total')
					.orderBy("total", "desc").limit(10).get();
				console.log(res);
				this.searchHot = res.result.data;
			},
			getsearchHistory() {
				CloudSearch.getSearchHistory(this.user_id).then(res => {
					console.log(res.data);
					this.searchHistory = res.data;
				});
			},
			search:debounce(function(){
				this.show = 2;
				CloudSearch.addSearch(this.user_id,this.searchWord)
				CloudSearch.Search(this.searchWord).then(res => {
					console.log(res);
					this.searchList = res.data
				})
			}),
			async addNumber(user_id, snack_id, value) {
				cloudShoppingCarts.addCartNumber(user_id, snack_id, value).then(res => {
					console.log(res);
					uni.showToast({
						title: '添加购物车成功',
					});
				})

			},
		}

	}
</script>

<style lang="scss">
	.search {
		// position: fixed;
		// top: var(--window-top, 10rpx);
		height: 60rpx;
		width: 100%;
		z-index: 1;
	}

	.beforeSearch {
		width: 100%;
		box-sizing: content-box;
		padding: 20rpx 20rpx;

		.historySearchBox {
			margin-top: 20rpx;
			width: 100%;
			height: 200rpx;
			display: flex;
			flex-wrap: wrap;

			.historySearchList {
				height: 50rpx;
				margin-right: 100rpx;
				// background-color: forestgreen;
				text-align: center;
			}
		}

		.hotSearchBox {
			margin-top: 20rpx;
			width: 100%;
			height: 200rpx;
			display: flex;
			flex-wrap: wrap;

			.hotSearchList {
				width: 30%;
				height: 50rpx;
				margin-right: 100rpx;
				// background-color: forestgreen;
				text-align: center;
			}
		}
	}

	.searchList {
		.cartitem {
			box-sizing: content-box;
			padding: 0 20rpx;
			width: 100%;
			height: 200rpx;
			display: flex;
			align-items: center;


			.pic {
				margin-left: 10rpx;
				width: 150rpx;
				height: 150rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.des {
				box-sizing: content-box;
				display: flex;
				flex-direction: column;
				margin-left: 10rpx;
				height: 150rpx;
				width: 500rpx;
				justify-content: space-between;

				.desitem1 {
					font-size: 30rpx;
				}

				.desitem2 {
					font-size: 40rpx;
					color: red;
				}

				.desitem3 {
					align-self: flex-end;
				}
			}

			.shoppingCarts {}
		}
	}
</style>